<template>
	<view class="table-card">
		<view class="table-card-title">{{props.title}}</view>
		<view class="table-card-combox" :style="[dropDownList.length==0?'padding: 28rpx 0rpx 0rpx 0rpx;':'']">
			<!-- #000000 #666666-->
			<eui-combox v-for="(item,index) in dropDownList" :selectWidth="item.c_width??'100rpx'"
				v-model="item.c_value" valueColor="#000000" backgroundColor="#F8F8F8" :border="false"
				:candidates="item.c_options" :fieldName="item.c_col" @selectChange="selectChange"
				:style="[index===0?'':'margin-left:20rpx;']" :placeholder="item.c_placeholder" @toggleSelector="toggleSelector" :showSelector="item.c_showSelector">
				</eui-combox>
		</view>
		<view v-if="showCharts">
			<view v-if="listData.length == 0" class="image-bottom">
				<image  src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
				<view class="no-data-text">暂无数据</view>
			</view>
			<eui-lime-chart v-else :option="chartOpts" :chartStyle="chartStyle"/>
		</view>

		<view style="padding-bottom:16rpx">
			<eui-table :column="column" :listData="listData" :loading="false" :compareTable="compareTable" :showDefaultEmpty="false" @click="clickCell">
				<template v-for="(item,index) in column" #[item.slot]="Props">
					<view v-if="item.slotInfo.type==='tag'" class="td-tag">
						<eui-tag v-for="(item1,index) in Props.item[item.slot]" :type="item1.type" :text="item1.text"
							plain plainFill></eui-tag>
					</view>
					<view v-else-if="item.slotInfo.type==='text'" :style="[item.slotInfo.style]">
						{{Props.item[item.slot]}}
					</view>
					<view class="td-image-view" v-else-if="item.slotInfo.type==='ranking'">
						<image v-if="getRankingImage(Props.item[item.slot])!==''" class="td-image"
							:src="getRankingImage(Props.item[item.slot])" mode="aspectFill" />
						<view v-else style="text-align: center;">{{Props.item[item.slot]}}</view>
					</view>
					<view v-else-if="item.slotInfo.type==='dotText'" class="td-dotText">
						<view class="td-dotText-dot"
							:style="{background:getColor(item.slotInfo.colorList,Props.item[item.slot])}"></view>
						<view class="td-dotText-text">{{getRealName(item.slotInfo.colorList,Props.item[item.slot])}}
						</view>
					</view>
					<view v-else-if="item.slotInfo.type==='selectText'">
						{{getRealName(item.slotInfo.selectList,Props.item[item.slot])}}
					</view>
				</template>
			</eui-table>
			<view v-if="listData.length===0" class="image-bottom">
				<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
				<view class="no-data-text">暂无数据</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, computed, defineEmits } from 'vue'
	import useService from '@/hooks/useService';
	const emits = defineEmits(["onSearch","clickCell"]);
	const WhereListReq = ref([]);

	const props = defineProps<{
		title ?: string;
		column ?: any[];
		listData ?: any[];
		whereList ?: any[];
		showCharts ?: boolean;
		chartOpts ?: any;
		chartStyle ?: string;
        compareTable ?: boolean;
	}>();

	const defaultWhereList = ref(props.whereList);
	const dropDownList = computed(() => {
		WhereListReq.value = defaultWhereList.value;
		return defaultWhereList.value?.filter(x => x.c_is_search === true)||[];
	});

	const selectChange = async (args) => {
		WhereListReq.value = WhereListReq.value.map(x => {
			return {
				c_col: x.c_col,
				c_oper: x.c_oper,
				c_value: x.c_col === args.fieldName ? args.selectValue : x.c_value,
				c_logic: x.c_logic,
				c_width: x.c_width,
				c_options: x.c_options,
				c_is_search: x.c_is_search,
				c_placeholder:x.c_placeholder,
				c_showSelector:x.c_showSelector
			}
		})
		emits('onSearch', WhereListReq.value);
	}
	const toggleSelector = async(args)=>{
		defaultWhereList.value = defaultWhereList.value.map(y=>{
			return {
				c_col: y.c_col,
				c_oper: y.c_oper,
				c_value: y.c_col === args.fieldName ? args.selectValue : y.c_value,
				c_logic: y.c_logic,
				c_width: y.c_width,
				c_options: y.c_options,
				c_is_search: y.c_is_search,
				c_placeholder:y.c_placeholder,
				c_showSelector:y.c_col ===args.fieldName ? true : false,
			}
		})
	}
	const getRankingImage = (index) => {
		let url = "";
		switch (index) {
			case 1:
				url = '../../../static/img/rdsImgs/ranking1.png';
				break;
			case 2:
				url = '../../../static/img/rdsImgs/ranking2.png';
				break;
			case 3:
				url = '../../../static/img/rdsImgs/ranking3.png';
				break;
			default:
				url = ""
				break;
		}
		return url;
	}
	const getColor = (colorList, item) => {
		return colorList.find(x => x.value === item)?.color;
	}
	const getRealName = (dataList, item) => {
		return dataList.find(x => x.value === item)?.text;
	}
    const clickCell = (index, item) => {
        emits('clickCell', index, item);
    }
</script>

<style lang="scss">
	.table-card {
		border-radius: 16rpx;
		//margin: 0px 10px 10px 10px;
		background-color: #ffffff;
	}

	.table-card-title {
		color: #000000;
		font-size: 30rpx;
		font-weight: 500;
		padding-left: 28rpx;
		padding-top: 28rpx;
	}

	.table-card-combox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;	
		padding: 20rpx 16rpx 28rpx 28rpx;
	}

	.td-image-view {
		display: felx;
		justify-content: center;
		align-items: cneter;
	}

	.td-image {
		width: 40rpx;
		height: 52rpx;
		text-align: center;
	}

	.td-dotText {
		display: flex;
		align-items: center;
	}

	.td-dotText-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}

	.td-dotText-text {
		margin-left: 12rpx;
	}
	.td-tag{
		display: flex;
		flex-wrap: wrap; 
		margin-left: 10rpx;
	}
	// .image-min {
	// 	width: 100%;
	// 	height: 200rpx;
	// }
	.image-min {
		width: 100%;
		height: 150rpx;
		opacity: 0.6;
		margin-top:-20rpx;
	}
	.no-data-text{
		text-align: center;
		color: #cccccc;
		font-size:24rpx;
		margin-top:-20rpx;
	}
	.image-bottom{
		  margin-bottom:40rpx;
	}
</style>